<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超市系统</title>
    <link rel="stylesheet" href="styles/main.css">
    <link rel="stylesheet" href="styles/modal.css">
    <link rel="stylesheet" href="styles/menu.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <script src="/js/jquery-1.12.4.min.js"></script>
    <script src="/js/vue.js"></script>
</head>

<body>
    <main id="app">
        <header id="header">
            <nav>
                <div class="sidebar-header">
                    <img src="/photo/Profile picture/logo.png" alt="Logo" class="logo"
                        style="width: 140px; height: 74px;">
                </div>
                <ul class="nav-links">
                    <li><a href="index.html"><i class="fas fa-home"></i> 首页</a></li>
                    <!-- <li><a href="menu.html"><i class="fas fa-list"></i> 商品列表</a></li> -->
                    <li><a href="order.html"><i class="fas fa-shopping-bag"></i> 我的订单</a></li>
                    <li><a href="cart.html"><i class="fas fa-shopping-cart"></i> 购物车</a></li>
                    <li class="user-info" style="background-color: rgb(51, 51, 51);">
                        <div class="user-avatar-container">
                            <div class="user-avatar">
                                <img id="userAvatar" :src="userAvatarUrl" alt="用户头像">
                            </div>
                            <span id="username" class="user-name" style="color: black;">{{username}}</span>
                            <div class="avatar-dropdown">
                                <a href="/profile.html" target="_blank" id="profileBtn" class="dropdown-item">
                                    <i class="fas fa-user"></i> 个人信息
                                </a>
                                <a href="/login.html" id="logoutBtn" class="dropdown-item">
                                    <i class="fas fa-sign-out-alt"></i> 退出
                                </a>
                            </div>
                        </div>
                    </li>
                </ul>
            </nav>
        </header>

        <!-- 搜索框部分 -->
        <div class="search-container">
            <div class="search-box">
                <input type="text" id="searchInput" placeholder="搜索商品...">
                <button id="searchButton">搜索
                    <i class="fas fa-search"></i>
                </button>
            </div>
        </div>
        <section class="carousel-section">
            <div class="carousel-container">
                <div class="carousel-wrapper">
                    <div class="carousel-slide">
                        <img src="/photo/shops/喜之郎.webp" alt="促销活动1">
                    </div>
                    <div class="carousel-slide">
                        <img src="/photo/shops/喜之郎.webp" alt="促销活动2">
                    </div>
                    <div class="carousel-slide">
                        <img src="/photo/shops/喜之郎.webp" alt="促销活动3">
                    </div>
                </div>
                <button class="carousel-btn prev">
                    <i class="fas fa-chevron-left"></i>
                </button>
                <button class="carousel-btn next">
                    <i class="fas fa-chevron-right"></i>
                </button>
                <div class="carousel-dots">
                    <span class="dot active"></span>
                    <span class="dot"></span>
                    <span class="dot"></span>
                </div>
            </div>
        </section>
        <section class="menu-container">
            <div class="menu-categories">
                <button class="category-btn" :class="{active: activeCategory === 0}" @click="filterCategory(0)"
                    data-id="0">全部</button>
                <button class="category-btn" v-for="item in categories" :key="item.classifyId"
                    :class="{active: activeCategory === item.classifyId}" @click="filterCategory(item.classifyId)"
                    :data-id="item.classifyId">{{item.classifyName}}</button>
            </div>
            <div class="menu-items" id="menuItems">
                <div class="menu-item" v-for="item in products" :key="item.commodityId">
                    <a :href="'product.html?commodityId=' + item.commodityId" target="_blank"
                        style="text-decoration: none; color: inherit;">
                        <img :src="item.image" :alt="item.name">
                        <h3>{{ item.commodityName }}</h3>
                        <p style="font-weight: bolder; font-size: large;">{{ item.commodityDescription }}</p>
                        <p class="price">¥{{ item.commoditySalePrice }}</p>
                    </a>
                </div>
                <div v-if="products.length === 0" style="color:red;">暂无商品</div>
            </div>
        </section>
    </main>
    <script src="/js/index.js"></script>
</body>

</html>